<template>
  <div>
    <c-table-box
      v-show="!showEditDlg"
      ref="decorationTable"
      show-index
      checkbox
      hide-func
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :other-raw="otherRaw"
      @selection-change="selectionChangeHandle"
    >
      <template #btn>
        <c-permission v-if="type==='all'" code="all">
          <c-button type="primary" opt-code="add" @click="addHandle">新增</c-button>
          <c-button type="primary" opt-code="termination" @click="handleStopData">终止数据</c-button>
          <c-button type="primary" opt-code="changedesigner" @click="changeConfigurator">变更配置人员</c-button>
          <c-button type="primary" opt-code="changecConfiguration" @click="changeProductConfig">变更产品配置</c-button>
          <c-button type="primary" opt-code="changelist" @click="changeBillDetail">变更开单明细</c-button>
          <c-button type="primary" opt-code="export" @click="exportVisible=true">导出</c-button>
        </c-permission>
        <c-permission v-else-if="type==='configuration'" code="configuration">
          <c-button type="primary" opt-code="configuration" @click="changeProductConfig">产品配置</c-button>
        </c-permission>
        <c-permission v-else-if="type==='confirm'" code="confirm">
          <c-button type="primary" opt-code="confirm" @click="confirmProList">确认产品清单</c-button>
        </c-permission>
        <c-permission v-else-if="type==='submit'" code="submit">
          <c-button type="primary" opt-code="submit" @click="reportDemand">需求提报</c-button>
        </c-permission>
        <c-permission v-else-if="type==='confirmdemand'" code="confirmdemand">
          <c-button type="primary" opt-code="deal" @click="processDemand">处理需求</c-button>
        </c-permission>
        <c-permission v-else-if="type==='confirmremit'" code="confirmremit">
          <c-button type="primary" opt-code="confirmremit" @click="clickRemit">打款</c-button>
        </c-permission>
        <c-permission v-else-if="type==='ordersubmit'" code="ordersubmit">
          <c-button type="primary" opt-code="deal" @click="orderDemand">订单处理</c-button>
        </c-permission>
      </template>
    </c-table-box>
    <div>
      <designer v-if="showDialog" ref="changeDialog" :visible.sync="showDialog" :detail-data="activedDataList" @success="refreshTable" />
      <Abort v-if="showAbortDlg" ref="relevanceDrawing" :visible.sync="showAbortDlg" :detail-data="activedData" @success="refreshTable" />
      <billDetail v-if="showBillDetailDlg" ref="billDetail" :visible.sync="showBillDetailDlg" :detail-data="activedData" @success="getBillTableData" />
      <CountersignProduct v-if="showProListDlg" ref="proList" :visible.sync="showProListDlg" :detail-data="activedData" @success="refreshTable" />
      <NeedSubmit v-if="showReportDlg" ref="reportDemandDlg" :visible.sync="showReportDlg" :detail-data="activedData" @success="refreshTable" />
      <NeedHandle v-if="showProcessDlg" ref="processDemand" :visible.sync="showProcessDlg" :detail-data="activedData" @success="refreshTable" />
      <Remit v-if="showRemitDlg" ref="remitDlg" :visible.sync="showRemitDlg" :detail-data="activedData" @success="refreshTable" />
      <OrderHandle v-if="showOderDemandDlg" ref="orderDemand" :visible.sync="showOderDemandDlg" :detail-data="activedData" @success="refreshTable" />
      <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />
    </div>
  </div>
</template>
<script>
import Abort from './Abort'
import billDetail from './billDetail'
import CountersignProduct from './countersignProduct'
import NeedSubmit from './needSubmit'
import NeedHandle from './needHandle'
import Remit from './remit'
import OrderHandle from './orderHandle'
import Designer from './designer.vue'
// import DecorationConfigEdit from '../configEdit/index.vue'
export default {
  name: 'List',
  components: {
    Abort,
    billDetail,
    CountersignProduct,
    NeedSubmit,
    NeedHandle,
    Remit,
    OrderHandle,
    Designer
    // DecorationConfigEdit
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    activeType: {
      type: String,
      default: ''
    },
    serachFilters: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      exportVisible: false,
      typeFilters: [],
      activedDataList: [],
      showDialog: false,
      showAbortDlg: false,
      showBillDetailDlg: false,
      showEditDlg: false,
      showProListDlg: false,
      showReportDlg: false,
      showProcessDlg: false,
      showRemitDlg: false,
      showOderDemandDlg: false,
      activedData: {},
      tableSelected: [],
      otherRaw: {},
      setting: [
        {
          prop: 'configCode',
          label: '产品配置单号',
          className: 'table-handelclick-text',
          isButton: true,
          clickFun: this.toDetail,
          minWidth: 130
        },
        {
          prop: 'designRange',
          label: '设计范围',
          minWidth: 120,
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'DECORATION_RANGE'
          }
        },
        {
          prop: 'configTaskCode',
          label: '产品配置任务',
          minWidth: 130
        },
        {
          prop: 'source',
          label: '任务来源',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'PRODUCT_CONFIG_TASK_SOURCE'
          },
          minWidth: 100
        },
        {
          prop: 'proConfigType',
          label: '产品配置类型',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'PRO_CONFIG_TYPE'
          },
          minWidth: 130
        },
        {
          prop: 'classDetail',
          label: '产品类型明细',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'CLASS_DETAIL'
          },
          minWidth: 130
        },
        {
          prop: 'deliveryMethod',
          label: '发货方式',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'DELIVERY_METHOD'
          },
          minWidth: 100
        },
        {
          prop: 'proConfiguratorName',
          label: '产品配置人员',
          minWidth: 130
        },
        {
          prop: 'schedule',
          label: '产品配置进度',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'ACC_SCHEDULE'
          },
          minWidth: 120
        },
        {
          prop: 'demandReportResult',
          label: '需求提报结果',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'DEMAND_RESULT'
          },
          minWidth: 130
        },
        {
          prop: 'demandReportTime',
          label: '需求提报时间',
          minWidth: 130
        },
        {
          prop: 'earlyRequireGoodsTimeLimit',
          label: '最早要货时限',
          minWidth: 130
        },
        {
          prop: 'expectRequireGoodsTime',
          label: '预计要货时限',
          minWidth: 130
        },
        {
          prop: 'requireGoodsNature',
          label: '要货性质',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'slm',
            dictTypeCode: 'REQUIRE_GOODS_NATURE'
          },
          minWidth: 100,
          render: (creat, row) => {
            if (row.schedule !== 'G' && row.requireGoodsNature === 'B') {
              return <span style='color: red'>延后要货</span>
            } else if (row.schedule === 'G' && row.requireGoodsNature === 'B') {
              return <span>延后要货</span>
            } else if (row.requireGoodsNature === 'A') {
              return <span>正常要货</span>
            } else if (row.requireGoodsNature === 'C') {
              return <span>提前要货</span>
            }
            return row.requireGoodsNature
          }
        },
        {
          prop: 'constCode',
          label: '门店建设项目号',
          minWidth: 140
        },
        {
          prop: 'shopName',
          label: '所属门店',
          minWidth: 100
        },
        {
          prop: 'clientName',
          label: '所属客户',
          minWidth: 100
        },
        {
          prop: 'officeName',
          label: '所属办事处',
          minWidth: 110
        },
        {
          prop: 'billingArea',
          label: '开单面积',
          minWidth: 110
        }

      ],
      otherFilter: [{ 'id': 'proConfigType', 'property': 'proConfigType', 'operator': 'in', 'value': '[RESOURCES, ACCESSORY]' },
        { 'id': 'isValid', 'property': 'isValid', 'operator': '=', 'value': 1 }],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigSheet/page`,
        hideSearchBar: true,
        sort: 'createTime',
        order: 'DESC',
        apiHeader: { 'Permission-Percode': 'decoration', 'Permission-App': 'slm' },
        setting: []
      }
    }
  },
  computed: {
    otherFilters() {
      return [...this.serachFilters, ...this.typeFilters]
    },
    exportConfig() {
      return [{
        code: 'export',
        name: '资源饰品类样品配置',
        dataApi: '/slm-admin/api/v1/productConfigSheet/exportResource?type=0',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }]
    }
  },
  watch: {
    type: {
      handler(v) {
        const needVerifyList = '最早要货时限 预计要货时限 要货性质'.split(' ')
        const remitVerifyList = '需求提报结果 需求提报时间'.split(' ')
        const otherList = [...needVerifyList, ...remitVerifyList]
        this.tableConfig.setting = []
        switch (v) {
          case 'confirmdemand':
            this.tableConfig.setting.push(...this.setting.filter(e => {
              return !needVerifyList.includes(e.label)
            }))
            break
          case 'configuration': case 'confirm': case 'submit':
            this.tableConfig.setting.push(...this.setting.filter(e => {
              return !otherList.includes(e.label)
            }))
            break
          default:
            this.tableConfig.setting.push(...this.setting.filter(e => {
              return e
            }))
            break
        }
        this.setOtherFilters(v)
      },
      immediate: true
    },
    serachFilters: {
      handler(v) {
        if (this.activeType !== this.type) return
        this.setOtherFilters(this.type)
        this.$nextTick(() => {
          this.$refs.decorationTable.initTableData()
        })
      }
    }
  },
  created() {
    // this.setOtherFilters([])
  },
  activated() {
    if (this.ready) {
      this.$nextTick(() => {
        this.$refs.decorationTable.initTableData()
      })
    }
  },
  deactivated() {
    this.ready = true
  },
  methods: {
    // 选中行
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    // 设置过滤条件
    setOtherFilters(type) {
      switch (type) {
        case 'all':
          this.typeFilters = [...this.otherFilter]
          break
        case 'configuration':
          { const arr1 = [{ 'id': 'schedule1', 'property': 'schedule', 'operator': '=', 'value': 'A' }]
            // const arr2 = this.serachFilters.filter(item => item.property !== 'schedule')
            this.typeFilters = [...this.otherFilter, ...arr1]
            this.otherRaw = { 'isEnd': 0 }
          }
          break
        case 'confirm':
          { const arr1 = [{ 'id': 'schedule1', 'property': 'schedule', 'operator': '=', 'value': 'B' }]
            // const arr2 = this.serachFilters.filter(item => item.property !== 'schedule')
            this.typeFilters = [...this.otherFilter, ...arr1]
            this.otherRaw = { 'isEnd': 0 }
          }
          break
        case 'submit':
          { const arr1 = [{ 'id': 'schedule1', 'property': 'schedule', 'operator': '=', 'value': 'C' }]
            // const arr2 = this.serachFilters.filter(item => item.property !== 'schedule')
            this.typeFilters = [...this.otherFilter, ...arr1]
            this.otherRaw = { 'isEnd': 0 }
          }
          break
        case 'confirmdemand':
          { const arr1 = [{ 'id': 'schedule1', 'property': 'schedule', 'operator': '=', 'value': 'D' }]
            // const arr2 = this.serachFilters.filter(item => item.property !== 'schedule')
            this.typeFilters = [...this.otherFilter, ...arr1]
            this.otherRaw = { 'isEnd': 0 }
          }
          break
        case 'confirmremit':
          { const arr1 = [{ 'id': 'schedule1', 'property': 'schedule', 'operator': '=', 'value': 'E' }]
            // const arr2 = this.serachFilters.filter(item => item.property !== 'schedule')
            this.typeFilters = [...this.otherFilter, ...arr1]
            this.otherRaw = { 'isEnd': 0 }
          }
          break
        case 'ordersubmit':
          { const arr1 = [{ 'id': 'schedule1', 'property': 'schedule', 'operator': '=', 'value': 'F' }]
            // const arr2 = this.serachFilters.filter(item => item.property !== 'schedule')
            this.typeFilters = [...this.otherFilter, ...arr1]
            this.otherRaw = { 'isEnd': 0 }
          }
          break
      }
    },
    toDetail(row) {
      this.$router.push({ name: 'PCDecorationDetail', params: row })
    },
    // 新增
    addHandle() {
      // if (!this.tableSelected.length) {
      //   this.$router.push({ name: 'PCDecorationConfigEdit' })
      // } else if (this.tableSelected.length > 1) {
      //   this.$message.warning('该操作仅支持单选')
      //   return
      // } else {
      this.$router.push({ name: 'PCDecorationConfigEdit' })
      // this.activedData = this.tableSelected[0]
      // }
    },
    // 终止数据
    handleStopData() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【终止数据】项')
        return
      }
      this.showAbortDlg = true
      this.activedData = this.tableSelected
    },
    // 变更产品配置人
    changeConfigurator() {
      if (!this.singleJudge(this.tableSelected, '变更', false)) {
        return
      }
      const tempArr = this.tableSelected.map(v => v.proConfigType)

      const list = Array.from(new Set(tempArr))
      if (list.length > 1) {
        this.$message.warning('请选择相同产品配置类型')
        return
      }
      this.activedDataList = this.tableSelected
      this.showDialog = true
    },
    // 产品配置/变更产品配置
    changeProductConfig() {
      let tip = '产品配置'
      if (this.type === 'all') {
        tip = '变更产品配置'
      }
      if (!this.tableSelected.length) {
        this.$message.warning(`请选择【${tip}】项`)
        return
      }
      if (this.tableSelected.length > 1) {
        this.$message.warning('该操作仅支持单选')
        return
      }
      const arr = ['A', 'B', 'C', 'E']
      const flag = arr.includes(this.tableSelected[0].schedule)
      if (!flag) {
        this.$message.warning('已提报需求，不能变更产品配置明细')
        return
      }
      if (!flag && this.tableSelected[0].schedule === 'H') {
        this.$message.warning('产品配置已终止，不能变更产品配置明细')
        return
      }
      if (!flag && this.tableSelected[0].schedule === 'G') {
        this.$message.warning('产品配置已完成，不能变更产品配置明细')
        return
      }
      if (this.tableSelected[0].schedule === 'E' && this.tableSelected[0].deliveryMethod !== 'B') {
        this.$message.warning('已提报需求，不能变更产品配置明细')
        return
      }
      this.$router.push({ name: 'PCDecorationRDConfig', params: {
        data: this.tableSelected[0],
        type: this.type
      }})
    },
    // 变更开单明细
    changeBillDetail() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【变更开单明细】项')
        return
      } else if (this.tableSelected.length > 1) {
        this.$message.warning('该操作仅支持单选')
        return
      }
      if (this.tableSelected[0].demandResultHandle !== 'ORDER_SUCC') {
        this.$message.warning('无法变更打款结果不为【已开单】的数据')
        return
      }
      this.showBillDetailDlg = true
      this.activedData = this.tableSelected[0]
    },
    // 确认产品清单
    confirmProList() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【确认产品清单】项')
        return
      } else if (this.tableSelected.length > 1) {
        this.$message.warning('该操作仅支持单选')
        return
      }
      this.showProListDlg = true
      this.activedData = this.tableSelected[0]
    },
    // 需求提报
    reportDemand() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【需求提报】项')
        return
      } else if (this.tableSelected.length > 1) {
        this.$message.warning('该操作仅支持单选')
        return
      }
      // return
      this.showReportDlg = true
      this.activedData = this.tableSelected[0]
    },
    // 处理需求
    processDemand() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【处理需求】项')
        return
      } else if (this.tableSelected.length > 1) {
        this.$message.warning('该操作仅支持单选')
        return
      }
      this.showProcessDlg = true
      this.activedData = this.tableSelected[0]
    },
    // 打款
    clickRemit() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【打款】项')
        return
      } else if (this.tableSelected.length > 1) {
        this.$message.warning('该操作仅支持单选')
        return
      }
      this.showRemitDlg = true
      this.activedData = this.tableSelected[0]
    },
    // 订单处理
    orderDemand() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【订单处理】项')
        return
      } else if (this.tableSelected.length > 1) {
        this.$message.warning('该操作仅支持单选')
        return
      }
      // this.showOderDemandDlg = true
      this.activedData = this.tableSelected[0]
      this.$router.push({ name: 'PCOrderDemand', params: {
        data: this.tableSelected[0],
        type: this.type
      }})
    },
    // 导出
    handleExport() {
      this.exportVisible = true
    },
    // 刷新
    refreshTable(isInit) {
      this.$refs.decorationTable.initTableData(isInit ? '' : 'onPage')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.table-handelclick-text {
  color: #3DC094;
  cursor: pointer;
}
</style>
